/**
 * Created by developer on 17-2-27.
 */
var $departmentTree = $("#container-nav-content");
var $selectedDepartment = $(".selected-department");
var $department = $(".container-department-new");
var $shady = $(".masking");
var $newMember = $(".container-member-new");
var $rightSlide = $(".aside-slider-content");
var $groupTree = $(".modal-select-department");
var $type = $("#type");
var $delete = $(".container-delete-member");
var $test = true;
var $button = $("#member_status .switch-animate");
$(function () {
    $(".jstree-node .jstree-ocl").on("click", function () {
        var $bro_ul = $(this).siblings(".jstree-children");
        modifyIconStatus($(this).parent(".jstree-node"), $bro_ul);
    });

    var $tree_div = $departmentTree.find(".jstree-wholerow");//通讯录页面左侧树形菜单节点元素
    var $tree_a = $departmentTree.find(".jstree-anchor");//通讯录页面左侧树形菜单节点元素
    $tree_div.on({
        mouseover : function () {
            $(this).addClass("jstree-wholerow-hovered");
            $(this).siblings(".jstree-anchor").addClass("jstree-hovered");
        },
        mouseout : function () {
            $(this).removeClass("jstree-wholerow-hovered");
            $(this).siblings(".jstree-anchor").removeClass("jstree-hovered");
        },
        mousedown : function (e) {//通讯录页面左侧树形菜单节点元素//鼠标右键
            var bro = $(this).siblings(".jstree-anchor");
            var map = bro.offset();//获取兄弟元素坐标
            var content = bro.text();
            content = content.replace(/^\s*|\s*\r\n$/,"");
            var liNode = $(this).parents(".jstree-children").siblings(".jstree-anchor").text();//父级兄弟元素内容
            liNode = liNode.replace(/^\s*|\s*\r\n$/,"");
            if(3 == e.which && bro.attr("id") != "1_anchor") {
                createTree(map, content, liNode, this);//创建标签
            } else if (3 == e.which && bro.attr("id") == "1_anchor") {
                createParentTree(map,content);
            }
        },
        contextmenu : function() {
            return false;
        },
        click : function () {
            $tree_div.each(function (index, obj) {
                $(obj).removeClass("jstree-wholerow-clicked");
            });
            $(this).addClass("jstree-wholerow-clicked");
        }
    });

    $tree_a.on({//通讯录页面左侧树形菜单节点元素//鼠标右键
        mouseover : function () {
            $(this).addClass("jstree-hovered");
            $(this).siblings(".jstree-wholerow").addClass("jstree-wholerow-hovered");
        },
        mouseout : function () {
            $(this).removeClass("jstree-hovered");
            $(this).siblings(".jstree-wholerow").removeClass("jstree-wholerow-hovered");
        },
        mousedown : function (e) {
            var map = $(this).offset();
            var content = $(this).text().toString();
            content = content.replace(/^\s*|\s*\r\n$/,"");
            var liNode = $(this).parents(".jstree-children").siblings(".jstree-anchor").text();
            liNode = liNode.replace(/^\s*|\s*\r\n$/,"");
            if(3 == e.which && $(this).attr("id") != "1_anchor") {
                createTree(map, content, liNode, this);
                return false;
            } else if(3 == e.which && $(this).attr("id") == "1_anchor") {
                createParentTree($(this).offset(), content);
                return false;
            }
        },
        contextmenu : function() {
            return false;
        },
        click : function () {
            $tree_div.each(function (index, obj) {
                $(obj).removeClass("jstree-wholerow-clicked");
            });
            $(this).siblings(".jstree-wholerow").addClass("jstree-wholerow-clicked");
        }
    });

    $groupTree.find(".cancel").on("click", function () {
        $groupTree.css("display", "none");
    });

    /*新建部门*/
    $type.on("change",function(e) {
        var $val = e.target.value;
        if($val == "门店")
        {
            $(".container-department-new .store").css("display", "block");
        }
        else
        {
            $(".container-department-new .store").css("display", "none");
        }
    });

    $(document).click(function () {
        if($(".jstree-default-contextmenu").css("display") == "block") {
            $(".jstree-default-contextmenu").remove();
        } else {
            return "";
        }
    });

    /*通讯录页面添加新成员按钮*/
    $(".button-add-member").on("click", AddMember);

    //全部\已禁用按钮
    $("#ALL").on("click", function () {
        $("#ALL").attr("class", "active");
        $("#DISABLE").removeClass("active");
        $("#member-list").css("display", "block");
        $("#member-disables-list").css("display", "none");
    });

    $("#DISABLE").on("click", function () {
        $("#DISABLE").attr("class", "active");
        $("#ALL").removeClass("active");
        $("#member-list").css("display", "none");
        $("#member-disables-list").css("display", "block");
    });

    /*通讯录列表点击事件*/
    $(".department_list .list-item").on("click", function () {
        if($rightSlide.css("right") == "-400px") {
            $rightSlide.animate({right: 0});
        } else {
            $rightSlide.animate({right: "-400px"});
        }
    });

    $rightSlide.find(".cancel").on("click", function () {
        $rightSlide.stop().animate({right: "-400px"});
    });

    /*编辑按钮*/
    $("#button_update_user").bind("click", ModifyMember);

    //删除按钮弹窗
    $("#button_delete_user").on("click", function() {
        modifyDisabledOrDeleteStatus();
        $delete.find(".panel_header").html("删除用户确认<span class='glyphicon glyphicon-remove cancel'></span>");
        $delete.find(".text").text('确定要删除＂xxx＂用户吗？');
        $delete.find(".cancel").click(function () {
            $delete.css("display","none");
            $shady.css("display","none");
        })
    });

    //禁用按钮弹窗
    $("#button_disable_user").on("click", function() {
        modifyDisabledOrDeleteStatus();
        $delete.find(".panel_header").html("禁用用户确认<span class='glyphicon glyphicon-remove cancel'></span>");
        $delete.find(".text").text('确定要禁用＂xxx＂用户吗？');
        console.log("disable error");
        console.log($delete.find(".text"));
        $delete.find(".cancel").click(function () {
            $delete.css("display","none");
            $shady.css("display","none");
        })
    });

    var $grouptree_div = $groupTree.find(".jstree-wholerow");//通讯录页面左侧树形菜单弹窗选择部门节点元素
    var $grouptree_a = $groupTree.find(".jstree-anchor");//通讯录页面左侧树形菜单弹窗选择部门节点元素

    //选择部门
    $grouptree_div.on("click", modifyDepartmentSelectedState);

    //选择部门
    $grouptree_a.on("click", modifyDepartmentSelectedState);

    $("#choiceParentDepartment").on("click", function() {
        $groupTree.css("display", "flex");
    });

    //人员状态切换
    $button.on("click", function (e){
        console.log("Point");
        if ($test) {
            $(this).animate({left: "-50px"});
            $(this).removeClass("switch-on");
            $(this).addClass("switch-off");
            $test = false;
        }else{
            $(this).animate({left: "0px"});
            $(this).removeClass("switch-off");
            $(this).addClass("switch-on");
            $test = true;
        }
        e.stopPropagation();
    });

});

function modifyIconStatus(obj, bro) {
    if (modify(obj, bro)) {
        obj.removeClass("jstree-open");
        obj.addClass("jstree-closed");
        bro.css("display", "none");
    } else {
        obj.removeClass("jstree-closed");
        obj.addClass("jstree-open");
        bro.css("display", "block");
    }
}

/*通讯录列表左侧菜单*/
function modify(obj, bro) {
    if (bro.css("display") == "none") {//判断兄弟元素是否出现，如果没出现
        return oTest = false;
    } else {
        return oTest = true;
    }
}

//部门页面左侧菜单列表右键菜单及菜单点击效果
/*
 * @param coordinate(a标签坐标),content(a标签文本),parentCon(父级a标签内容)
 *
 *
 * */
function createTree(coordinate, content, parentCon, obj) {
    var $contextmenu = $(".jstree-default-contextmenu");
    if($contextmenu.css("display") == "block") {
        $contextmenu.remove();
    }
    var $left = coordinate.left + "px";
    var $top = coordinate.top + 30 + "px";
    var $i = $("<i>", {
        "class": "addIcon"
    });
    var $i1 = $("<i>", {
        "class": "updateIcon"
    });
    var $i2 = $("<i>", {
        "class": "deleteIcon"
    });
    var $i3 = $("<i>", {
        "class": "addIcon"
    });
    var $i4 = $("<i>", {
        "class": "upIcon"
    });
    var $i5 = $("<i>", {
        "class": "downIcon"
    });
    var $span = $("<span>", {
        "class": "vakata-contextmenu-sep",
        html: "&nbsp;"
    });
    var $span1 = $("<span>", {
        "class": "vakata-contextmenu-sep",
        html: "&nbsp;"
    });
    var $span2 = $("<span>", {
        "class": "vakata-contextmenu-sep",
        html: "&nbsp;"
    });
    var $span3 = $("<span>", {
        "class": "vakata-contextmenu-sep",
        html: "&nbsp;"
    });
    var $span4 = $("<span>", {
        "class": "vakata-contextmenu-sep",
        html: "&nbsp;"
    });
    var $span5 = $("<span>", {
        "class": "vakata-contextmenu-sep",
        html: "&nbsp;"
    });
    var $a = $("<a>", {
        "href": "#",
        html: "&nbsp;"
    });
    var $a1 = $("<a>", {
        "href": "#",
        html: "&nbsp;"
    });
    var $newa1 = $("<a>",{
        "href": "#",
        "rel": "0",
        html : "添加子部门"
    }).prepend($i, $span);
    var $newa2 = $("<a>",{
        "href": "#",
        "rel": "1",
        html : "修改部门"
    }).prepend($i1, $span1);
    var $newa3 = $("<a>",{
        "href": "#",
        "rel": "2",
        html : "删除部门"
    }).prepend($i2, $span2);
    var $newa4 = $("<a>",{
        "href": "#",
        "rel": "3",
        html : "新增成员"
    }).prepend($i3, $span3);
    var $newa5 = $("<a>",{
        "href": "#",
        "rel": "4",
        html : "上移"
    }).prepend($i4, $span4);
    var $newa6 = $("<a>",{
        "href": "#",
        "rel": "5",
        html : "下移"
    }).prepend($i5, $span5);
    var $li = $("<li>", {
        "class": "vakata-context-separator",
        html: ""
    }).append($a);
    var $li1 =  $("<li>", {
        "class": "vakata-context-separator",
        html: ""
    }).append($a1);
    var $newli1 = $("<li>", {
        "class": ""
    }).append($newa1);
    var $newli2 = $("<li>", {
        "class": ""
    }).append($newa2);
    var $newli3 = $("<li>", {
        "class": ""
    }).append($newa3);
    var $newli4 = $("<li>", {
        "class": ""
    }).append($newa4);
    var $newli5 = $("<li>", {
        "class": ""
    }).append($newa5);
    var $newli6 = $("<li>", {
        "class": ""
    }).append($newa6);
    var $ul = $("<ul>",{
        "class" : "vakata-context jstree-contextmenu jstree-default-contextmenu"
    }).css({"display": "block", "left": $left, "top": $top}).prepend($newli1, $li1, $newli2, $li, $newli3, $newli4, $newli5, $newli6);
    $("body").append($ul);
    //子菜单点击弹窗
    $newli1.on("click", function () {
        $department.find(".panel-header").html('新建部门<span class="iconfont cancel">&#xe616;</span>');
        addOrModifyDepartment();
    });
    $newli2.bind("click", function () {
        $department.find(".panel-header").html('修改部门<span class="iconfont cancel">&#xe616;</span>');
        addOrModifyDepartment();
    });
    $newli3.bind("click", function () {
        $(obj).parent().remove();
    });
    $newli4.bind("click", AddMember);
    $newli5.bind("click", function () {
        var parentNode = $(obj).parent('.jstree-node');
        var brothor = parentNode.prev();
        var n = parentNode,p = brothor;
        n.insertBefore(p);
        p.insertAfter(n);
    });
    $newli6.bind("click", function () {
        var parentNode = $(obj).parent('.jstree-node');
        var brothor = parentNode.next();
        var n = parentNode,p = brothor;
        p.insertBefore(n);
        n.insertAfter(p);
    });
}

//通讯录页面左侧树形菜单在id为1时选择添加子部门
function createParentTree(coordinate,content){
    var $contextmenu = $(".jstree-default-contextmenu");
    if($contextmenu.css("display") == "block") {
        $contextmenu.remove();
    }
    var $left = coordinate.left + "px";
    var $top = coordinate.top + 30 + "px";
    var $i = $("<i>", {
        "class": "addIcon"
    });
    var $span = $("<span>", {
        "class": "vakata-contextmenu-sep",
        html: "&nbsp;"
    });
    var $newa1 = $("<a>",{
        "href": "#",
        "rel": "0",
        html : "添加子部门"
    }).prepend($i, $span);
    var $newli1 = $("<li>", {
        "class": ""
    }).append($newa1);
    var $ul = $("<ul>",{
        "class" : "vakata-context jstree-contextmenu jstree-default-contextmenu",
    }).css({"display": "block", "left": $left, "top": $top}).prepend($newli1);
    $("body").append($ul);
    $newli1.on("click", function () {
        $department.css("display", "flex");
        $shady.css("display", "block");
        $department.find(".element-department-name").text(content);
        $department.find(".cancel").on("click", function () {
            $shady.css("display", "none");
            $department.css("display", "none");
        });
        $("#save_next_department").css("display", "inline-block");
        $("#save_next_department").on("click", function(){
            $("#name-department-new").attr("value", "");
        });
    });
}

function AddMember() {
    modifyStyle($shady, $newMember.eq(0));
    $("#username-member-new").removeAttr("value");
    $("#username-member-new").attr("disabled",false);
    $("#username-member-new").css("background-color", "#ffffff");
    $("#name-member-new").removeAttr("value");
    $("#birthday-member-new").removeAttr("value");
    $("#docmentNum-member-new").removeAttr("value");
    $("#phone-member-new").removeAttr("value");
    $("#save_next_user").css("display", "inline-block");
    $("#create_user_h").html("新增成员<span class='iconfont cancel'>&#xe616;</span>");
    $("#department-member-new").html('<div class="iconfont" id="department_one">&#xe649;</div><input type="hidden" name="department_member_new" />');
    /*通讯录页面添加新成员按钮点击弹出框关闭按钮*/
    $newMember.find(".cancel").on("click", function () {
        $shady.css("display", "none");
        $newMember.css("display", "none");
    });
    /*通讯录页面添加新成员页面所在部门按钮*/
    $("#department_one").on("click", function () {
        $groupTree.css("display", "flex");
        $selectedDepartment.empty();
    });
    $rightSlide.css("right", "-400px");
}

function ModifyMember() {
    modifyStyle($shady, $newMember);
    $rightSlide.css("right", "-400px");
    $("#username-member-new").attr("value", "yangpanteng");
    $("#username-member-new").attr("disabled",true);
    $("#username-member-new").css("background-color", "#eeeeee");
    $("#name-member-new").attr("value", "杨攀腾");
    $("#birthday-member-new").attr("value", "1994-09-22");
    $("#docmentNum-member-new").attr("value", "130429199409220311");
    $("#phone-member-new").attr("value", "15732620645");
    $("#save_next_user").css("display", "none");
    $("#create_user_h").html("修改成员<span class='iconfont cancel'>&#xe616;</span>");
    $("#department-member-new").html('<div class="iconfont" id="department_one">&#xe649;</div><input type="hidden" name="department_member_new" /><div class="element-department" fullname="腾讯通开发/内测体验/腾讯通体验组" name="腾讯通体验组"><img src="../images/group.jpg" alt="" /><p class="element-department-name" title="腾讯通开发/内测体验/腾讯通体验组">腾讯通体验组</p> <p class="iconfont delete">&#xe616;</p></div>');
    /*通讯录页面修改成员按钮点击弹出框关闭按钮*/
    $newMember.find(".cancel").on("click", function () {
        $shady.css("display", "none");
        $newMember.css("display", "none");
    });
    /*通讯录页面修改新成员页面所在部门按钮*/
    $("#department_one").on("click", function () {
        $groupTree.css("display", "flex");
        $departmentTree.empty();
        appendText("id", "腾讯通开发");
    });
}

function addOrModifyDepartment() {
    $department.css("display", "flex");
    $shady.css("display", "block");
    $department.find(".element-department-name").text(content);
    $("#name-department-new").attr("value", "");
    $department.find(".cancel").on("click", function () {
        $shady.css("display", "none");
        $department.css("display", "none");
    });
    $("#save_next_department").css("display", "inline-block");
    $("#save_next_department").on("click", function(){
        $("#name-department-new").removeAttr("value");
    });
}

function modifyStyle(obj1, obj2) {
    if(obj1.css("display") == "none" && obj2.css("display") == "none") {
        obj1.css("display" ,"block");
        obj2.css("display", "flex");
    } else {
        obj1.css("display" ,"none");
        obj2.css("display", "none");
    }
}

//选择部门页面头部添加节点
var bigarr = new Array();
var smallarr = new Array();
function appendText(id, content, name, fullname) {
    smallarr = {"id": id, "name": name, "fullname": fullname, "content": content, "imgadd": "../images/group.jpg"};
    bigarr.push(smallarr);
    smallarr = [];
    $selectedDepartment.empty();
    for (var i = 0; i < bigarr.length; i++) {
        var $img = $("<img>", {
            src: bigarr[i]['imgadd']
        });
        var pNameElement = $("<p>",{
            "class": "element-department-name",
            html: bigarr[i]['content']
        });
        var pIconElement = $("<p>",{
            "class": "iconfont delete",
            html: "&#xe616;"
        });
        var $div = $("<div>", {
            "class" : "element-department",
            "title" : bigarr[i]['fullname'],
            "fullname" : bigarr[i]['fullname'],
            "name" : bigarr[i]['name'],
            "id" : bigarr[i]['id']
        }).append($img, pNameElement, pIconElement);
        $selectedDepartment.append($div);
    }

    $(".element-department .delete").on("click", function () {
        var currentId = $(this).parent().attr("id");
        console.log(currentId);
        $(this).parent(".element-department").remove();
        var $rs = [];
        for(var $i = 0; $i < bigarr.length; $i++){
            if(bigarr[$i]["id"] == currentId){
                continue;
            } else {
                $rs.push(bigarr[$i]);
            }
        }
        bigarr = $rs;
        $("#" + currentId + "_anchor").removeClass("jstree-disabled");
    });
}

function modifyDisabledOrDeleteStatus() {
    $shady.css("display", "block");
    $delete.css("display", "flex");
    $delete.find(".cancel").each(function () {
        $(this).on("click",function (){
            $shady.css("display", "none");
            $delete.css("display", "none");
        });
    });
}

function modifyDepartmentSelectedState() {
    if($(this).parent(".jstree-node").attr("id") == "1") {
        alert("当前部门不能选择");
    } else if($(this).hasClass("jstree-disabled")){
        alert("已选中当前部门");
    } else {
        var content = $(this).text().toString();//获取兄弟元素子元素内容
        content = content.replace(/^\s*|\s*\r\n$/,"");
        var $id = $(this).parent(".jstree-node").attr("id");
        appendText($id, content);
        $(this).addClass("jstree-disabled");
    }
}